<template>
    <div class="user-data">
        <div class="user-data-wtitle positionR">
            <span class="iconfont icon-arrows_right" @click="hrefBack"></span>
            <span class="user-data-title flexCenter fontSize18">个人资料</span>
        </div>
        <ul>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">
                <span class="user-data-left displayFlex flexCenter">头像</span>
                <span class="user-data-right displayFlex flexCenter">
                    <img class="user-data-header" :src="pageMsg.photoUrl" alt="">
                    <span class="iconfont icon-arrows_right"></span>
                </span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">
                <span class="user-data-left displayFlex flexCenter">昵称</span>
                <span class="user-data-right displayFlex flexCenter">
                    <span>{{pageMsg.userName}}</span>
                    <span class="iconfont icon-arrows_right"></span>
                </span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt">

                <span class="user-data-left displayFlex flexCenter">手机号码</span>
                <span class="user-data-right displayFlex flexCenter color-gray-disabled">
                    {{pageMsg.phone}}
                </span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">

                <span class="user-data-left displayFlex flexCenter">性别</span>
                <span class="user-data-right displayFlex flexCenter">
                    <span v-if="pageMsg.gender == 1">男</span>
                    <span v-else-if="pageMsg.gender == 0">女</span>
                    <span v-else></span>
                    <span class="iconfont icon-arrows_right"></span>
                </span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">
                <span class="user-data-left displayFlex flexCenter">微信</span>
                <span class="user-data-right displayFlex flexCenter" v-if="pageMsg.bindedWechats.length > 0">
                    <span>{{pageMsg.bindedWechats[0].nickName}}</span>
                    <span class="iconfont icon-arrows_right"></span>
                </span>
                <span class="no-bind color-gray-disabled" v-else>未绑定</span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">
                <span class="user-data-left displayFlex flexCenter">支付密码</span>
                <span class="user-data-right displayFlex flexCenter">
                    <span v-if="pageMsg.configPayPwd">已设置</span>
                    <span class="no-bind color-gray-disabled" v-else>未设置</span>
                    <span class="iconfont icon-arrows_right"></span>
                </span>
            </li>
            <li class="user-data-item displayFlex justifyCtBwt" @click="toHaoKanHaoWan">
                <span class="user-data-left displayFlex flexCenter">登录密码</span>
                <span class="user-data-right displayFlex flexCenter" v-if="pageMsg.configLoginPwd">
                    <span v-if="pageMsg.configLoginPwd">已设置</span>
                    <span class="color-gray-disabled" v-else>未设置</span>
                    <span class="iconfont icon-arrows_right"></span>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
    name: "UserMsg",
    data () {
        return {
            pageMsg: {
                "userId": 0,                       //------------用户ID
                "phone": "",                       //------------手机号码
                "userName": "",                    // ------------用户名
                "chatAccount": "",                 //-------------用户的通信账户
                "photoUrl": "",                    //------------用户头像
                "gender": '',                    //-------性别:  0:女,1:男
                "configPayPwd": false,             //------------是否设置了支付密码
                "configLoginPwd": false,           //------------是否设置了登录密码
                "bindedWechats": [                 //------------用户已绑定的微信列表
                    {
                        "thirdId": 0,              //-----第三方ID
                        "photo": "",               // ---头像
                        "nickName": "",            // -----昵称
                    }
                ]
            },
        }
    },
    mounted () {
        this.getUserMsg();
    },
    methods: {
        hrefBack () {
            // window.location.href = window.location.history(-1);
            this.$router.go(-1);
        },
        getUserMsg () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/user/account/${this.userId}/info/get`
            this.xurl.get(url).then((data) => {
                console.log(data, '9999999');

                if (data.success) {
                    this.pageMsg = Object.assign({}, this.pageMsg, data.result);

                }
            })
        },

    }
}
</script>

<style scoped lang="scss">
.user-data-item,
.user-data-wtitle {
    padding: 0.15rem;
    border-bottom: 1px solid #f1f1f1;
}

.user-data-item .icon-arrows_right {
    font-size: 0.22rem;
}

.user-data-header {
    width: 0.28rem;
    height: 0.28rem;
    object-fit: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.user-no-bind {
    color: #ccc;
}
.user-data-wtitle .icon-arrows_right {
    position: absolute;
    left: 0.15rem;
    font-size: 0.26rem;
    font-weight: bold;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
</style>